<template>
	<view class="container" @click="navigateToDetail">
		<view class="uni-flex order-no-item">
			<view class="order-item-text"
				style="-webkit-flex: 1;flex: 1;font-size: 26rpx; color: rgba(41, 43, 53, 0.8);">
				运单号：123456789123
			</view>
			<view class="order-item-text"
				style="-webkit-flex: 1;flex: 1; align-items: flex-end; justify-content: flex-end;font-size: 26rpx; color: rgba(255, 102, 0, 1);">
				运输中
			</view>
		</view>
		<!-- 运输中 -->
		<view class="uni-flex" style="margin: 0rpx 26rpx;">
			<!-- 起点 / 终点 -->
			<view style="-webkit-flex: 1;flex: 1;">
				<view class="uni-flex order-location-item" style="-webkit-flex: 1;flex: 1;margin-top: 10rpx;">
					<view
						style="width: 14rpx; height: 14rpx; border-radius: 50%; margin-right: 15rpx; background-color: rgba(46, 169, 255, 1)">
					</view>
					<view
						style="-webkit-flex: 1;flex: 1; font-size: 28rpx; color: rgba(41, 43, 53, 1);font-weight: bold;">
						北京崇文门外大街
					</view>
				</view>
				<view class="uni-flex order-location-item" style="-webkit-flex: 1;flex: 1;margin-top: 15rpx;">
					<view
						style="width: 14rpx; height: 14rpx; border-radius: 50%; margin-right: 15rpx; background-color: rgba(41, 210, 144, 1)">
					</view>
					<view
						style="-webkit-flex: 1;flex: 1;font-size: 28rpx; color: rgba(41, 43, 53, 1);font-weight: bold;">
						上海市交通大学
					</view>
				</view>
			</view>
			<!-- 价格 -->
			<view class="uni-flex">
				<view style="display: flex; align-items: center;font-size: 30rpx; color: rgba(255, 102, 0, 1);">8200
				</view>
				<view
					style="display: flex; align-items: center;font-size: 24rpx; color: rgba(255, 102, 0, 1); margin-left: 5rpx;">
					元
				</view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="order-car-info" @click.stop="toggleCarInfo">
			<view class="uni-flex" style="display: flex;align-items: center;justify-content: center;">
				<view style="-webkit-flex: 1;flex: 1;color: rgba(41, 43, 53, 1); font-size: 26rpx; font-weight: 600;">
					车辆信息</view>
				<text class="uni-panel-icon uni-icon"
					:style="itemData.open ? 'transform: rotate(270deg);': ''">{{itemData.open? '&#xe470;' : '&#xe581;'}}</text>
			</view>
			<view v-if="itemData.open" style="margin-top: 10rpx;">
				<view class="uni-flex">
					<view class="order-car-info-text" style="-webkit-flex: 1;flex: 1.4; ">
						车辆型号：宝马3系
					</view>
					<view class="order-car-info-text" style="-webkit-flex: 1;flex: 1;padding-left: 10rpx;">
						车辆数量：1
					</view>
				</view>
				<view class="uni-flex">
					<view class="order-car-info-text" style="-webkit-flex: 1;flex: 1.4; ">
						车辆估值：30/万元
					</view>
					<view class="order-car-info-text" style="-webkit-flex: 1;flex: 1;padding-left: 10rpx; ">
						车辆车况：正常
					</view>
				</view>
				<view class="uni-flex">
					<view class="order-car-info-text" style="-webkit-flex: 1;flex: 1.4;">
						提车服务：需要
					</view>
					<view class="order-car-info-text" style="-webkit-flex: 1;flex: 1;padding-left: 10rpx;">
						送车服务：不需要
					</view>
				</view>
				<view class="uni-flex">
					<view class="order-car-info-text" style="-webkit-flex: 1;flex: 1;">
						VIN码：12345678912345789
					</view>
				</view>
			</view>
		</view>
		<!-- 下单时间 -->
		<view class="order-datetime">下单时间：2024.09.04 12:00</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemData: {
				id: 0,
				open: false,
				default: function(e) {
					return {}
				}
			}
		},
		methods: {
			toggleCarInfo(event) {
				// if (!this.list[e].pages) {
				// 	this.goDetailPage('', this.list[e].url);
				// 	return;
				// }
				this.itemData.open = !this.itemData.open;
			},
			navigateToDetail() {
				uni.navigateTo({
					url: '../original/OrderInTransitDetail'
				})
			}
		},
	}
</script>
<style lang="scss">
	@import '@/common/uni-nvue.css';

	.container {
		width: 100%;
		height: auto;
		padding: 0rpx 25rpx;
		box-sizing: border-box;
	}

	.order-no-item {
		width: 100%;
		padding: 21rpx 0rpx;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.order-item-text {
		width: 100%;
		display: flex;
		color: rgba(41, 43, 53, 1);
		font-size: 26rpx;
	}

	.order-location-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 10rpx;
	}

	.order-car-info {
		margin-top: 25rpx;
		width: 100%;
		padding: 20rpx 35rpx;
		background-color: rgba(246, 247, 250, 1);
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.order-car-info-text {
		width: 100%;
		color: #999999;
		padding-top: 12rpx;
		font-size: 24rpx;
		color: rgba(41, 43, 53, 0.7);
	}

	.order-datetime {
		margin-top: 24rpx;
		width: 100%;
		padding: 21rpx 0rpx;
		color: rgba(41, 43, 53, 0.7);
		font-size: 24rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #f4f4f4;
	}
</style>